import React, {Component} from 'react';


import {Table,message,Breadcrumb,PageHeader,Button,Input,Row,Col,Form,Upload,Popconfirm} from 'antd';
import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    UploadOutlined
} from "@ant-design/icons";

import axios from "@src/lib/axios";
import "@src/style/tableCom.scss";
import "@src/style/common.scss";

export default class ImagesSource extends Component {
    state = {
        params: {
            name: "",
            image_id:"",
            page: 1,
            size: 15,
        },
        preEditId:0,
        list: [],
        total:0,
        pageSize:15
    };



    UNSAFE_componentWillMount() {
        this.fetchData();
    }

    fetchData = () => {
        let {params} = this.state

        axios.post("/assets/image/list", params).then(res => {
            if (res.code == 0) {
                this.setState({list: res.data.list})
            }else{
                message.warning(res.msg);
            }
        });
    }

    onSearch = (values) => {

        Object.assign(this.state.params,{...values})
        this.fetchData();
    }

    //删除图片
    deleteImage = (id) =>{
        console.log(id)
        axios.post('/assets/image/del',{id:id}).then(res=>{
            message.success(res.msg)
            this.fetchData();
        }).catch(res=>{
            message.warning(res.msg)
        });
    }

    //上传图片
    uploadImage = (row) =>{
        //调用上传api 获取imageid
        //调用图片信息修改接口修改图片
    }


    //保存文件名
    handleSave = (name,record) =>{
        console.log(name,record)
        axios.post('/assets/image/update',{name:name,id:record.id}).then(res=>{
            message.success(res.msg)
            this.fetchData();
        }).catch(res=>{
            message.warning(res.msg)
        });
    }

    //添加图片
    onChange = (res)=>{
        console.log(res);
        let {file} = res;
        console.log(file);
        let that = this;
        if (file.status == "done") {
            if (this.state.preEditId > 0) {//修改
                let params = {image_id: file.response.data.imgid,id:this.state.preEditId}
                axios.post('/assets/image/update',params).then(res=>{
                    message.success(res.msg);
                    that.setState({preEditId:0})
                    that.fetchData();
                }).then(res=>{
                    that.setState({preEditId:0})
                    message.warning(res.msg);
                });
            }else {//添加
                let params = {name: file.name, image_id: file.response.data.imgid};
                axios.post('/assets/image/add', params).then(res => {
                    message.success(res.msg);
                    that.setState({preEditId:0})
                    that.fetchData();
                }).catch(res => {
                    message.warning(res.msg);
                })
            }
        }else if (file.status == 'error') {
            message.error("上传失败");
        }
    }
    onPreEditUpload =(id)=>{
        this.setState({preEditId:id})
    }


    render() {
        let {list,total,pageSize} = this.state
        const props = {
            name:"userfile",
            action:`${process.env.IMG_SERVER_URL}`+"/images_serv/",
            onChange:this.onChange,
            progress:false
        }

        const props_update = {
            name:"userfile",
            action:`${process.env.IMG_SERVER_URL}`+"/images_serv/",
            onChange:this.onChange,
            progress:false,
            showUploadList:false
        }

        const columns = [
            {title: "编号", width: 20, dataIndex: "id", align: "center"},
            {title: "图片名称", width: 100, dataIndex: 'name', align: "center",render:(text,record)=>{
                    return (
                        <Input defaultValue={text} onPressEnter={(text)=>this.handleSave(text.target.value,record)}/>
                    )
                }},
            {title: "图片id", width: 30, dataIndex: 'image_id', align: "center"},
            {title: "展示", width: 30, dataIndex: 'image_id', render: (text, record) => {
                return (
                    <div>
                    <img width={100}
                        src={`${process.env.IMG_SERVER_URL}`+'/images_serv/'+record.image_id}></img>
                    </div>
                )
                }
            },
            {title:"操作",width:40,dataIndex:"id",align:"center",render: (text,record) =>{
                return (
                    <Row>
                        <Upload {...props_update} >
                            <Button type="primary" size={"small"} onClick={()=>this.onPreEditUpload(record.id)}><UploadOutlined />上传图片</Button>
                        </Upload>
                        <Popconfirm
                            title="确认删除该图片?"
                            okText="是"
                            cancelText="否"
                            onConfirm={()=>this.deleteImage(record.id)}
                        >
                            <Button type="link">
                                <DeleteOutlined />删除
                            </Button>
                        </Popconfirm>
                    </Row>
                )
                }}
        ]

        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>资源管理</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="">图片列表</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <PageHeader
                    className="site-page-header"
                    title="图片资源"
                    subTitle="管理系统图片资源"
                />

                <Row style={{padding: "20px 0 0 0 "}}>
                    <Col span={24}>
                        <Form
                            size="small"
                            labelCol={{span: 6}}
                            wrapperCol={{span: 24}}
                            name="basic"
                            onFinish={this.onSearch}>
                            <Row gutter={10}>
                                <Col span={3}>
                                    <Form.Item colon={false} name="name" >
                                        <Input placeholder="输入图片名称"  />
                                    </Form.Item>
                                </Col>
                                <Col span={3}>
                                    <Form.Item colon={false} name="image_id" >
                                        <Input placeholder="输入图片资源id"  />
                                    </Form.Item>
                                </Col>
                                <Col span={10}>
                                    <Button type="primary" htmlType="submit">搜索</Button>
                                </Col>
                            </Row>
                        </Form>
                    </Col>
                </Row>
                <Row className="fields-box">
                    <Col span={12} style={{ marginBottom: '20px'}}>
                        <Upload {...props}>
                        <Button type="primary" ><UploadOutlined/>上传图片</Button>
                        </Upload>
                    </Col>
                </Row>

                <Row>
                    <Col span={24}>
                    <Table
                        size="small"
                        columns={columns}
                        rowKey="id"
                        dataSource={list}
                        pagination={{
                            total:total,
                            pageSize: pageSize,
                            current: this.state.params.page,
                            onChange: this.onChangePage
                        }}
                    />
                    </Col>
                </Row>
            </div>
        );
    }
}
